---
title: 'Examples'
description: 'End to end examples for adding Nile Auth to your B2B application'
icon: 'lightbulb'
---

These are end to end examples that you can fork and use it to build your own applications. It works with Nile's Postgres and Nile Auth.

## Workflows

<CardGroup>
  <Card
    title="Email Login"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/user_management/email_login/NextJS"
    icon={
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlSpace="preserve"
        width={36}
        height={36}
        viewBox="0 0 408.759 408.759"
        {...props}
      >
        <path
          d="M204.385 408.759c-58.121 0-113.674-24.867-152.417-68.225C18.46 303.057.005 254.703.005 204.381.005 91.685 91.689 0 204.385 0c50.317 0 98.674 18.455 136.164 51.964 43.346 38.762 68.205 94.316 68.205 152.417.001 112.695-91.679 204.378-204.369 204.378"
          style={{
            fill: '#ffbe00',
          }}
        />
        <path
          d="M377.757 204.379c0 4.43-.17 8.821-.489 13.161a172.715 172.715 0 0 1-7.42 38.74c-20.39 65.09-78.11 113.66-148.081 120.61a173.616 173.616 0 0 1-17.38.87c-51.39 0-97.559-22.361-129.301-57.881-.259-.29-.519-.591-.789-.881-26.951-30.56-43.29-70.68-43.29-114.62 0-95.749 77.619-173.38 173.379-173.38 43.95 0 84.069 16.35 114.631 43.29.29.27.589.53.879.79 35.512 31.762 57.861 77.911 57.861 129.301"
          style={{
            fill: '#f4502a',
          }}
        />
        <path
          d="M74.327 319.03a174.61 174.61 0 0 0 9.424 9.872 174.438 174.438 0 0 1-8.665-9.023c-.249-.279-.5-.569-.759-.849m-12.305-15.665.045.065a1.498 1.498 0 0 0-.045-.065m-.315-.454.044.064a7.807 7.807 0 0 0-.044-.064m-.205-.297.061.088-.061-.088m-.613-.896.08.117-.08-.117m-.226-.333.097.143-.097-.143m-.293-.435.099.147-.099-.147m-.295-.441.178.266-.178-.266m-.244-.365.134.202a14.13 14.13 0 0 0-.134-.202m-.277-.419.147.222a28.342 28.342 0 0 0-.147-.222M59.023 298.915l.163.25-.163-.25m-.265-.408.172.265-.172-.265m-.281-.435.207.32-.207-.32m-1.036-1.629.212.337-.212-.337m-.249-.398.227.363a72.062 72.062 0 0 0-.227-.363m-.265-.427.226.363-.226-.363m-.252-.408.223.362a70.774 70.774 0 0 1-.223-.362m-.245-.397.231.376-.231-.376m-.263-.432.232.381-.232-.381m-.49-.809c.16.267.319.528.48.794l-.48-.794m92.421-253.231C79.969 63.709 31.006 128.321 31.006 204.37c0 32.099 8.718 62.16 23.92 87.94-15.202-25.781-23.918-55.837-23.918-87.931 0-76.049 48.961-140.667 117.09-164.038"
          style={{
            fill: '#c29100',
          }}
        />
        <path
          d="M204.385 31.001c-19.703 0-38.639 3.286-56.287 9.34-68.129 23.371-117.09 87.989-117.09 164.038 0 32.094 8.716 62.15 23.918 87.931l.008.014c.239.405.48.811.722 1.214l.021.034c.158.264.32.531.48.794l.009.015.232.381.031.051.231.376.013.021.223.362.029.046.226.363.04.064.227.363.022.035.212.337.042.067.219.346.05.079.221.347.034.053a51.235 51.235 0 0 1 .255.399l.207.32.074.115.172.265.093.143.163.25.084.128a49.734 49.734 0 0 0 .285.433l.147.222.13.196.134.202.109.163.178.266.118.175.099.147.194.288.097.143.129.191.08.117.221.324.076.111.236.343.061.088.145.209.044.064.27.389.045.065a173.94 173.94 0 0 0 12.259 15.6c.259.28.51.57.76.849a174.096 174.096 0 0 0 17.379 16.912c-25.53-30.2-40.919-69.241-40.919-111.881 0-95.749 77.619-173.368 173.379-173.368 42.629 0 81.68 15.39 111.87 40.919-31.788-37.588-79.307-61.458-132.407-61.458"
          style={{
            fill: '#ba3d20',
          }}
        />
        <path
          d="M204.387 112.21c-19.44 0-37.832 5.907-53.259 16.894-8.645 6.773-13.829 12.076-13.829 12.076l64.573 64.573-97.275 9.128 79.438 79.438h.002c6.591 1.481 13.401 2.231 20.35 2.231 3.13 0 6.23-.161 9.211-.46a91.88 91.88 0 0 0 77.56-60.601 92.012 92.012 0 0 0 5.388-31.11c0-26.2-11.209-51.249-30.768-68.729l-.19-.179c-.131-.111-.251-.222-.36-.321a92.075 92.075 0 0 0-60.841-22.94"
          style={{
            fill: '#ba3d20',
          }}
        />
        <path
          d="m204.154 148.487-14.85 14.85 30.544 30.543H104.597v21h115.251l-30.544 30.543 14.85 14.85 55.892-55.893z"
          style={{
            fill: '#fff',
          }}
        />
        <path
          d="M289.143 129.414c18.184 20.573 28.405 47.245 28.405 74.964 0 11.56-1.741 22.961-5.171 33.88a115.392 115.392 0 0 1-5.11 13.34 112.811 112.811 0 0 1-91.55 65.38c-2.761.292-5.61.462-8.491.532-.94.03-1.889.039-2.84.039-28.819 0-56.741-11.164-77.628-30.836l90.569 90.567c1.479-.111 2.958-.24 4.439-.39 69.97-6.951 127.69-55.521 148.081-120.61a172.715 172.715 0 0 0 7.42-38.74l-88.124-88.126"
          style={{
            fill: '#ba3d20',
          }}
        />
        <path
          d="M317.548 204.379c0 11.56-1.741 22.961-5.171 33.88a115.392 115.392 0 0 1-5.11 13.34 112.811 112.811 0 0 1-91.55 65.38c-2.761.292-5.61.462-8.491.532-.94.03-1.889.039-2.84.039-31.06 0-61.079-12.969-82.37-35.579l15.281-14.4c12.83 13.63 28.979 22.789 46.74 26.748 6.591 1.481 13.401 2.231 20.35 2.231 3.13 0 6.23-.161 9.211-.46a91.88 91.88 0 0 0 77.56-60.601 92.012 92.012 0 0 0 5.388-31.11c0-26.2-11.209-51.249-30.768-68.729l-.19-.179c-.131-.111-.251-.222-.36-.321a92.08 92.08 0 0 0-60.841-22.939c-25.659 0-49.49 10.289-67.09 28.97l-15.281-14.4c21.611-22.941 50.862-35.57 82.37-35.57a113.06 113.06 0 0 1 74.81 28.259l.249.231c.151.129.281.24.401.36 23.961 21.448 37.702 52.179 37.702 84.318"
          style={{
            fill: '#1ca4ba',
          }}
        />
        <path
          d="M291.158 235.489a91.88 91.88 0 0 1-77.56 60.601c-2.98.299-6.081.46-9.211.46-6.949 0-13.759-.75-20.35-2.231l23.19 23.192c2.881-.07 5.73-.24 8.491-.532a112.811 112.811 0 0 0 91.55-65.38l-16.11-16.11"
          style={{
            fill: '#157d8e',
          }}
        />
      </svg>
    }
  >
    Login with Email or Magic Link
  </Card>
  <Card
    title="Email Verification"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/user_management/email_verified/NextJS"
    icon={
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width={36}
        height={36}
        viewBox="0 0 24 24"
        {...props}
      >
        <defs>
          <style>{'.cls-3{fill:#6c2e7c}'}</style>
        </defs>
        <g id="Icons">
          <path
            d="M23 12a11 11 0 0 1-22 0 10.827 10.827 0 0 1 .29-2.5 11 11 0 0 1 21.42 0A10.827 10.827 0 0 1 23 12Z"
            style={{
              fill: '#56b54e',
            }}
          />
          <ellipse
            cx={12}
            cy={9.5}
            rx={10.71}
            ry={8.5}
            style={{
              fill: '#60cc5a',
            }}
          />
        </g>
        <g id="Layer_4" data-name="Layer 4">
          <path
            d="M12 0a12 12 0 1 0 12 12A12.013 12.013 0 0 0 12 0Zm0 22a10 10 0 1 1 10-10 10.011 10.011 0 0 1-10 10Z"
            className="cls-3"
          />
          <path
            d="M16.293 8.293 10 14.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l7-7a1 1 0 0 0-1.414-1.414Z"
            className="cls-3"
          />
        </g>
      </svg>
    }
  >
    Verify user using email
  </Card>
  <Card
    title="Reset Password"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/user_management/reset_password/NextJS"
    icon={
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlSpace="preserve"
        width={36}
        height={36}
        viewBox="0 0 512 512"
        {...props}
      >
        <path
          d="M450.282 288.524c31.048-25.475 50.948-64.103 50.948-107.16 0-76.235-62.375-138.606-138.609-138.606H149.376C73.141 42.757 10.77 105.128 10.77 181.365c0 76.235 62.371 138.606 138.606 138.606l176.091-.002c17.215-25.716 46.53-42.645 79.802-42.645 16.268.001 31.591 4.05 45.013 11.2z"
          style={{
            fill: '#a7e2de',
          }}
        />
        <path
          d="M450.282 288.524c-13.423-7.15-28.745-11.198-45.013-11.198-33.272 0-62.586 16.929-79.802 42.645-10.207 15.247-16.158 33.587-16.158 53.314 0 52.998 42.962 95.959 95.96 95.959s95.961-42.961 95.961-95.959c0-36.731-20.635-68.641-50.948-84.761zm-70.44 79.554h50.855c6.994 0 12.714 5.72 12.714 12.714v25.427c0 6.994-5.719 12.714-12.714 12.714h-50.855c-6.994 0-12.714-5.72-12.714-12.714v-25.427c0-6.995 5.719-12.714 12.714-12.714z"
          style={{
            fill: '#85bf4f',
          }}
        />
        <path
          d="M430.696 368.078h-50.855c-6.994 0-12.714 5.72-12.714 12.714v25.427c0 6.994 5.72 12.714 12.714 12.714h50.855c6.994 0 12.714-5.72 12.714-12.714v-25.427c0-6.995-5.719-12.714-12.714-12.714z"
          style={{
            fill: '#eda23f',
          }}
        />
        <path
          d="M210.686 192.135h19.312l-13.656 13.656c-4.205 4.206-4.206 11.024 0 15.231a10.737 10.737 0 0 0 7.615 3.156c2.757 0 5.512-1.052 7.615-3.155l13.656-13.656v19.312c0 5.947 4.822 10.77 10.77 10.77 5.947 0 10.77-4.823 10.77-10.77v-19.314l13.659 13.659a10.74 10.74 0 0 0 7.614 3.155 10.74 10.74 0 0 0 7.617-3.156c4.205-4.206 4.205-11.024-.001-15.231L282 192.135h19.312c5.948 0 10.77-4.822 10.77-10.77 0-5.947-4.822-10.77-10.77-10.77h-22.778c.299-3.093-.733-6.292-3.103-8.661s-5.569-3.403-8.663-3.103v-22.779c0-5.948-4.823-10.77-10.77-10.77-5.948 0-10.77 4.822-10.77 10.77v19.312l-13.656-13.656c-4.207-4.206-11.025-4.205-15.232.001-4.206 4.206-4.205 11.024 0 15.231l13.657 13.656h-19.313c-5.948 0-10.77 4.823-10.77 10.77.002 5.949 4.824 10.769 10.772 10.769z"
          style={{
            fill: '#000003',
          }}
        />
        <path
          d="M287.73 160.405c2.743 0 5.488-1.043 7.59-3.129l.312-.31c4.22-4.192 4.243-11.011.052-15.231-4.193-4.22-11.011-4.242-15.232-.052l-.312.31c-4.22 4.192-4.242 11.011-.052 15.232a10.74 10.74 0 0 0 7.642 3.18zM176.143 181.365c0-5.947-4.821-10.77-10.77-10.77h-19.315l13.656-13.656c4.206-4.206 4.206-11.025 0-15.232-4.205-4.206-11.024-4.206-15.232 0l-13.655 13.656v-19.312c0-5.948-4.823-10.77-10.77-10.77-5.947 0-10.77 4.822-10.77 10.77v19.312L95.63 141.707c-4.206-4.206-11.025-4.206-15.232 0-4.206 4.206-4.206 11.025 0 15.232l13.656 13.656H74.742c-5.948 0-10.77 4.823-10.77 10.77 0 5.948 4.822 10.77 10.77 10.77h19.313L80.4 205.791c-4.206 4.206-4.206 11.025 0 15.232a10.742 10.742 0 0 0 7.615 3.155c2.756 0 5.513-1.052 7.615-3.155l13.656-13.656v19.312c0 5.947 4.823 10.77 10.77 10.77 5.947 0 10.77-4.823 10.77-10.77v-19.312l13.655 13.656c2.103 2.102 4.861 3.155 7.617 3.155s5.512-1.052 7.614-3.155c4.206-4.206 4.206-11.025 0-15.232l-13.655-13.656h19.314c5.95 0 10.772-4.82 10.772-10.77zM346.627 192.135h19.312l-13.656 13.656c-4.206 4.206-4.206 11.024-.001 15.231a10.738 10.738 0 0 0 7.617 3.156c2.756 0 5.512-1.052 7.614-3.155l13.656-13.656v19.312c0 5.947 4.822 10.77 10.77 10.77s10.77-4.823 10.77-10.77v-19.314l13.659 13.659a10.74 10.74 0 0 0 7.616 3.155c2.757 0 5.512-1.052 7.616-3.156 4.206-4.206 4.205-11.024 0-15.231l-13.656-13.656h19.312c5.947 0 10.77-4.822 10.77-10.77 0-5.947-4.823-10.77-10.77-10.77h-19.312l13.657-13.656c4.205-4.206 4.206-11.024 0-15.231-4.207-4.206-11.025-4.206-15.232-.001l-13.659 13.659v-19.314c0-5.948-4.822-10.77-10.77-10.77s-10.77 4.822-10.77 10.77v19.312l-13.656-13.656c-4.206-4.206-11.024-4.205-15.232.001-4.205 4.206-4.205 11.024.001 15.231l13.658 13.656h-19.313c-5.948 0-10.77 4.823-10.77 10.77-.001 5.948 4.82 10.768 10.769 10.768z"
          style={{
            fill: '#000003',
          }}
        />
        <path
          d="M467.998 286.991c28.117-28.001 44.001-65.746 44.001-105.627 0-82.367-67.012-149.376-149.379-149.376H149.376C67.01 31.987 0 98.997 0 181.365c0 82.367 67.01 149.376 149.376 149.376h158.02c-5.69 13.041-8.855 27.428-8.855 42.542 0 58.851 47.879 106.729 106.73 106.729S512 432.134 512 373.283c0-35.426-17.355-66.869-44.002-86.292zm-318.622 22.211c-70.489 0-127.836-57.347-127.836-127.838 0-70.49 57.347-127.837 127.836-127.837H362.62c70.491 0 127.839 57.347 127.839 127.838 0 36.044-15.181 70.07-41.873 94.384-13.245-5.904-27.903-9.194-43.316-9.194H181.032c-5.948 0-10.77 4.823-10.77 10.77 0 5.948 4.822 10.77 10.77 10.77H341.05a107.67 107.67 0 0 0-21.075 21.107H149.376zm255.895 149.27c-46.974 0-85.19-38.214-85.19-85.189 0-46.972 38.215-85.189 85.19-85.189 46.972 0 85.189 38.215 85.189 85.189 0 46.975-38.217 85.189-85.189 85.189z"
          style={{
            fill: '#000003',
          }}
        />
        <path
          d="M430.696 357.308h-42.591l-2.679-9.996c-1.006-3.756-.477-7.699 1.492-11.108 1.967-3.408 5.118-5.837 8.875-6.844 4.524-1.213 9.417-.143 13.092 2.859 4.606 3.765 11.39 3.082 15.153-1.522 3.765-4.604 3.083-11.39-1.521-15.155-9.026-7.379-21.104-9.989-32.302-6.989-9.312 2.493-17.109 8.489-21.954 16.88-4.844 8.39-6.137 18.14-3.645 27.446l2.24 8.354c-6.324 4.213-10.501 11.405-10.501 19.556v25.427c0 12.949 10.534 23.484 23.484 23.484h50.855c12.949 0 23.484-10.534 23.484-23.484v-25.427c.002-12.947-10.532-23.481-23.482-23.481zm1.944 48.911c0 1.054-.89 1.944-1.944 1.944h-50.855c-1.054 0-1.944-.89-1.944-1.944v-25.427c0-1.046.877-1.929 1.92-1.942h.017l.048-.002h50.813c1.054 0 1.944.89 1.944 1.944v25.427zM150.16 266.555h-.783c-5.948 0-10.77 4.823-10.77 10.77 0 5.948 4.822 10.77 10.77 10.77h.783c5.949 0 10.77-4.822 10.77-10.77 0-5.947-4.822-10.77-10.77-10.77z"
          style={{
            fill: '#000003',
          }}
        />
      </svg>
    }
  >
    Initiate password reset flow
  </Card>
  <Card
    title="Google Login"
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/user_management/social_login_google/NextJS"
    icon={
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width={36}
        height={36}
        viewBox="0 0 32 32"
        {...props}
      >
        <defs>
          <path
            id="A"
            d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"
          />
        </defs>
        <clipPath id="B">
          <use xlinkHref="#A" />
        </clipPath>
        <g transform="matrix(.727273 0 0 .727273 -.954545 -1.45455)">
          <path d="M0 37V11l17 13z" clipPath="url(#B)" fill="#fbbc05" />
          <path
            d="M0 11l17 13 7-6.1L48 14V0H0z"
            clipPath="url(#B)"
            fill="#ea4335"
          />
          <path
            d="M0 37l30-23 7.9 1L48 0v48H0z"
            clipPath="url(#B)"
            fill="#34a853"
          />
          <path
            d="M48 48L17 24l-4-3 35-10z"
            clipPath="url(#B)"
            fill="#4285f4"
          />
        </g>
      </svg>
    }
  >
    Add Google SSO support
  </Card>
</CardGroup>

## Frameworks

<CardGroup>
  <Card 
    title="NextJS" 
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/quickstart/nextjs"
    icon={<svg
    xmlns="http://www.w3.org/2000/svg"
    width={36}
    height={36}
    preserveAspectRatio="xMidYMid"
    viewBox="0 0 256 256"
  >
    <path d="M119.617.069c-.55.05-2.302.225-3.879.35-36.36 3.278-70.419 22.894-91.99 53.044-12.012 16.764-19.694 35.78-22.597 55.922C.125 116.415 0 118.492 0 128.025c0 9.533.125 11.61 1.151 18.64 6.957 48.065 41.165 88.449 87.56 103.411 8.309 2.678 17.067 4.504 27.027 5.605 3.879.425 20.645.425 24.524 0 17.192-1.902 31.756-6.155 46.12-13.486 2.202-1.126 2.628-1.426 2.327-1.677-.2-.15-9.584-12.735-20.845-27.948l-20.47-27.648-25.65-37.956c-14.114-20.868-25.725-37.932-25.825-37.932-.1-.025-.2 16.84-.25 37.431-.076 36.055-.1 37.506-.551 38.357-.65 1.226-1.151 1.727-2.202 2.277-.801.4-1.502.475-5.28.475h-4.33l-1.15-.725a4.679 4.679 0 0 1-1.677-1.827l-.526-1.126.05-50.166.075-50.192.776-.976c.4-.525 1.251-1.2 1.852-1.526 1.026-.5 1.426-.55 5.755-.55 5.105 0 5.956.2 7.282 1.651.376.4 14.264 21.318 30.88 46.514 16.617 25.195 39.34 59.599 50.5 76.488l20.27 30.7 1.026-.675c9.084-5.905 18.693-14.312 26.3-23.07 16.191-18.59 26.626-41.258 30.13-65.428 1.026-7.031 1.151-9.108 1.151-18.64 0-9.534-.125-11.61-1.151-18.641-6.957-48.065-41.165-88.449-87.56-103.411-8.184-2.652-16.892-4.479-26.652-5.58-2.402-.25-18.943-.525-21.02-.325Zm52.401 77.414c1.201.6 2.177 1.752 2.527 2.953.2.65.25 14.562.2 45.913l-.074 44.987-7.933-12.16-7.958-12.16v-32.702c0-21.143.1-33.028.25-33.603.4-1.401 1.277-2.502 2.478-3.153 1.026-.525 1.401-.575 5.33-.575 3.704 0 4.354.05 5.18.5Z" />
  </svg>}>
    Auth with NextJS
  </Card>
  <Card 
    title="Node" 
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/quickstart/node_react"
    icon={<svg xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
    <path
      fill="#388e3c"
      d="m17.204 19.122-4.907 2.715a.563.563 0 0 0-.297.492v5.433c0 .203.113.39.297.492l4.908 2.717c.183.101.41.101.593 0l4.907-2.717a.566.566 0 0 0 .295-.492v-5.433a.564.564 0 0 0-.297-.492l-4.906-2.715a.613.613 0 0 0-.594 0m25.248 4.891-.818.452a.093.093 0 0 0-.049.082v.906c0 .034.019.065.049.082l.818.453a.102.102 0 0 0 .099 0l.818-.453a.095.095 0 0 0 .049-.082v-.906a.094.094 0 0 0-.05-.082l-.818-.452c-.015-.009-.032-.013-.049-.013s-.034.004-.049.013"
    />
    <path
      fill="#37474f"
      d="m35.751 13.364-2.389-1.333a.243.243 0 0 0-.361.212L33 20.295l-2.203-1.219a.613.613 0 0 0-.594 0h.001l-4.907 2.715a.563.563 0 0 0-.297.491v5.433c0 .203.113.39.297.492l4.908 2.717c.183.101.41.101.593 0l4.907-2.717a.565.565 0 0 0 .295-.492V13.788a.487.487 0 0 0-.249-.424zm-2.885 13.094-2.23 1.235a.28.28 0 0 1-.269 0l-2.231-1.235a.255.255 0 0 1-.136-.224v-2.47c0-.092.051-.177.135-.224l2.231-1.234h-.001a.29.29 0 0 1 .27 0l2.23 1.234a.259.259 0 0 1 .135.225v2.47a.257.257 0 0 1-.134.223z"
    />
    <path
      fill="#2e7d32"
      d="M17.204 19.122 12 27.762c0 .203.113.39.297.492l4.908 2.717c.183.101.41.101.593 0L23 22.329a.564.564 0 0 0-.297-.492l-4.906-2.715a.613.613 0 0 0-.594 0"
    />
    <path
      fill="#4caf50"
      d="m17.204 19.122-4.907 2.715a.563.563 0 0 0-.297.492l5.204 8.642c.183.101.41.101.593 0l4.907-2.717a.565.565 0 0 0 .296-.492l-5.203-8.64a.613.613 0 0 0-.594 0"
    />
    <path
      fill="#37474f"
      d="m47.703 21.791-4.906-2.715a.613.613 0 0 0-.594 0h.001l-4.907 2.715a.574.574 0 0 0-.297.503v5.411c0 .209.114.402.297.503l4.908 2.717a.613.613 0 0 0 .593 0l2.263-1.253a.3.3 0 0 0-.002-.526l-4.924-2.687a.263.263 0 0 1-.135-.228v-2.466c0-.092.05-.177.13-.221l2.235-1.236h-.001a.29.29 0 0 1 .27 0l2.235 1.237c.08.044.13.129.13.221v2.012a.241.241 0 0 0 .363.208l2.398-1.393a.483.483 0 0 0 .24-.417v-1.88a.576.576 0 0 0-.297-.505zm-37 0-4.906-2.715a.613.613 0 0 0-.594 0h.001L.297 21.791a.574.574 0 0 0-.297.503v7.465a.241.241 0 0 0 .363.208l2.398-1.393A.482.482 0 0 0 3 28.157v-4.393c0-.092.05-.177.13-.221l2.235-1.236a.29.29 0 0 1 .27 0l2.235 1.237c.08.044.13.129.13.221v4.393a.48.48 0 0 0 .24.417l2.398 1.393a.246.246 0 0 0 .242.001.245.245 0 0 0 .12-.21v-7.464a.576.576 0 0 0-.297-.504z"
    />
  </svg>
}>
    Auth with Node
  </Card>

  <Card 
    title="Remix" 
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/quickstart/remix"
    icon={<svg
    xmlns="http://www.w3.org/2000/svg"
    width={72}
    height={72}
    viewBox="0 0 1024 1024"
    fill="none"
    {...props}
  >
    <g filter="url(#a)">
      <path
        fill="#FFF7FF"
        d="M583.592 97.78V228h46.946V97.78h-46.946Zm-.29-12.263h47.526v-41.46h-47.526v41.46Z"
      />
    </g>
    <g fill="#E8F2FF" filter="url(#b)">
      <path
        fillRule="evenodd"
        d="M193.744 183.947c1.643 21.267 1.643 31.236 1.643 42.118h-48.829c0-2.371.042-4.539.084-6.738.132-6.835.27-13.962-.829-28.356-1.452-21.072-10.457-25.755-27.015-25.755H42v-38.34h79.122c20.915 0 31.372-6.412 31.372-23.387 0-14.926-10.457-23.972-31.372-23.972H42V42h87.836c47.35 0 70.88 22.536 70.88 58.535 0 26.926-16.558 44.486-38.926 47.413 18.882 3.805 29.92 14.634 31.954 35.999Z"
        clipRule="evenodd"
      />
      <path d="M42 226.064v-28.581h51.63c8.624 0 10.496 6.445 10.496 10.289v18.292H42Z" />
    </g>
    <g filter="url(#c)">
      <path
        fill="#FFF0F1"
        d="M782.943 97.524h-48.395l-22.025 30.95-21.444-30.95h-51.873l46.656 63.943-50.714 66.278h48.396l25.792-35.329 25.791 35.329H787l-51.004-68.322 46.947-61.899Z"
      />
    </g>
    <g filter="url(#d)">
      <path
        fill="#FFFAEA"
        d="M478.111 119.105c-5.506-15.183-17.388-25.694-40.281-25.694-19.416 0-33.326 8.76-40.281 23.066V96.915h-46.947v130.22h46.947v-63.942c0-19.562 5.506-32.409 20.865-32.409 14.2 0 17.677 9.343 17.677 27.154v69.197h46.947v-63.942c0-19.562 5.216-32.409 20.865-32.409 14.199 0 17.387 9.343 17.387 27.154v69.197h46.947v-81.752c0-27.154-10.433-51.972-46.077-51.972-21.735 0-37.094 11.095-44.049 25.694Z"
      />
    </g>
    <g filter="url(#e)">
      <path
        fill="#F1FFF0"
        d="M301.716 176.598c-4.347 10.22-12.461 14.599-25.212 14.599-14.2 0-25.792-7.591-26.951-23.65h90.705v-13.139c0-35.328-22.893-65.11-66.073-65.11-40.281 0-70.419 29.49-70.419 70.658 0 41.46 29.559 66.57 70.999 66.57 34.196 0 57.959-16.643 64.624-46.424l-37.673-3.504Zm-51.583-31.825c1.738-12.263 8.404-21.606 23.473-21.606 13.91 0 21.444 9.927 22.024 21.606h-45.497Z"
      />
    </g>
    <defs>
      <filter
        id="a"
        width={103.526}
        height={239.944}
        x={555.302}
        y={16.056}
        colorInterpolationFilters="sRGB"
        filterUnits="userSpaceOnUse"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feColorMatrix
          in="SourceAlpha"
          result="hardAlpha"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation={14} />
        <feComposite in2="hardAlpha" operator="out" />
        <feColorMatrix values="0 0 0 0 0.847059 0 0 0 0 0.231373 0 0 0 0 0.823529 0 0 0 1 0" />
        <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3_93" />
        <feColorMatrix
          in="SourceAlpha"
          result="hardAlpha"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation={14} />
        <feComposite in2="hardAlpha" operator="out" />
        <feColorMatrix values="0 0 0 0 0.847059 0 0 0 0 0.231373 0 0 0 0 0.823529 0 0 0 1 0" />
        <feBlend
          in2="effect1_dropShadow_3_93"
          result="effect2_dropShadow_3_93"
        />
        <feBlend
          in="SourceGraphic"
          in2="effect2_dropShadow_3_93"
          result="shape"
        />
      </filter>
      <filter
        id="b"
        width={242.715}
        height={268.065}
        x={0}
        y={0}
        colorInterpolationFilters="sRGB"
        filterUnits="userSpaceOnUse"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feColorMatrix
          in="SourceAlpha"
          result="hardAlpha"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation={21} />
        <feComposite in2="hardAlpha" operator="out" />
        <feColorMatrix values="0 0 0 0 0.223529 0 0 0 0 0.572549 0 0 0 0 1 0 0 0 1 0" />
        <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3_93" />
        <feColorMatrix
          in="SourceAlpha"
          result="hardAlpha"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation={14} />
        <feComposite in2="hardAlpha" operator="out" />
        <feColorMatrix values="0 0 0 0 0.223529 0 0 0 0 0.572549 0 0 0 0 1 0 0 0 0.9 0" />
        <feBlend
          in2="effect1_dropShadow_3_93"
          result="effect2_dropShadow_3_93"
        />
        <feBlend
          in="SourceGraphic"
          in2="effect2_dropShadow_3_93"
          result="shape"
        />
      </filter>
      <filter
        id="c"
        width={215.852}
        height={194.22}
        x={603.148}
        y={65.524}
        colorInterpolationFilters="sRGB"
        filterUnits="userSpaceOnUse"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feColorMatrix
          in="SourceAlpha"
          result="hardAlpha"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation={14} />
        <feComposite in2="hardAlpha" operator="out" />
        <feColorMatrix values="0 0 0 0 0.960784 0 0 0 0 0.2 0 0 0 0 0.258824 0 0 0 1 0" />
        <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3_93" />
        <feColorMatrix
          in="SourceAlpha"
          result="hardAlpha"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation={16} />
        <feComposite in2="hardAlpha" operator="out" />
        <feColorMatrix values="0 0 0 0 0.960784 0 0 0 0 0.2 0 0 0 0 0.258824 0 0 0 1 0" />
        <feBlend
          in2="effect1_dropShadow_3_93"
          result="effect2_dropShadow_3_93"
        />
        <feBlend
          in="SourceGraphic"
          in2="effect2_dropShadow_3_93"
          result="shape"
        />
      </filter>
      <filter
        id="d"
        width={273.635}
        height={189.724}
        x={322.602}
        y={65.411}
        colorInterpolationFilters="sRGB"
        filterUnits="userSpaceOnUse"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feColorMatrix
          in="SourceAlpha"
          result="hardAlpha"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation={14} />
        <feComposite in2="hardAlpha" operator="out" />
        <feColorMatrix values="0 0 0 0 0.996078 0 0 0 0 0.8 0 0 0 0 0.105882 0 0 0 1 0" />
        <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3_93" />
        <feColorMatrix
          in="SourceAlpha"
          result="hardAlpha"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation={14} />
        <feComposite in2="hardAlpha" operator="out" />
        <feColorMatrix values="0 0 0 0 0.996078 0 0 0 0 0.8 0 0 0 0 0.105882 0 0 0 1 0" />
        <feBlend
          in2="effect1_dropShadow_3_93"
          result="effect2_dropShadow_3_93"
        />
        <feBlend
          in="SourceGraphic"
          in2="effect2_dropShadow_3_93"
          result="shape"
        />
      </filter>
      <filter
        id="e"
        width={192.493}
        height={193.228}
        x={175.766}
        y={61.298}
        colorInterpolationFilters="sRGB"
        filterUnits="userSpaceOnUse"
      >
        <feFlood floodOpacity={0} result="BackgroundImageFix" />
        <feColorMatrix
          in="SourceAlpha"
          result="hardAlpha"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation={14} />
        <feComposite in2="hardAlpha" operator="out" />
        <feColorMatrix values="0 0 0 0 0.419608 0 0 0 0 0.85098 0 0 0 0 0.407843 0 0 0 1 0" />
        <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_3_93" />
        <feColorMatrix
          in="SourceAlpha"
          result="hardAlpha"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation={14} />
        <feComposite in2="hardAlpha" operator="out" />
        <feColorMatrix values="0 0 0 0 0.419608 0 0 0 0 0.85098 0 0 0 0 0.407843 0 0 0 1 0" />
        <feBlend
          in2="effect1_dropShadow_3_93"
          result="effect2_dropShadow_3_93"
        />
        <feBlend
          in="SourceGraphic"
          in2="effect2_dropShadow_3_93"
          result="shape"
        />
      </filter>
    </defs>
  </svg>
}>
    Auth with Remix
  </Card>
  <Card 
    title="Drizzle" 
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/quickstart/drizzle"
    icon={<svg
    xmlns="http://www.w3.org/2000/svg"
    width={36}
    height={36}
    fill="none"
  >
    <rect width={36} height={36} fill="#17161B" rx={5} />
    <path
      fill="#C5F74F"
      d="M8.108 16.658c.336-.563 1.087-.762 1.677-.446.59.316.796 1.028.46 1.59l-3.946 6.602c-.336.562-1.087.762-1.678.446-.59-.316-.796-1.028-.46-1.59l3.947-6.602ZM16.613 11.596c.336-.562 1.087-.762 1.678-.446.59.316.796 1.028.46 1.59l-3.946 6.602c-.337.563-1.088.762-1.678.446-.59-.316-.796-1.028-.46-1.59l3.946-6.602ZM29.701 11.596c.336-.562 1.087-.762 1.677-.446.59.316.797 1.029.46 1.59l-3.946 6.603c-.336.562-1.087.762-1.677.445-.59-.316-.796-1.028-.46-1.59l3.946-6.602ZM21.193 16.658c.336-.563 1.087-.762 1.678-.446.59.316.796 1.028.46 1.59l-3.946 6.602c-.337.562-1.088.762-1.678.446-.59-.316-.796-1.028-.46-1.59l3.946-6.602Z"
    />
  </svg>}>
    Auth with Drizzle
  </Card>
  <Card 
    title="Prisma" 
    href="https://github.com/niledatabase/niledatabase/tree/main/examples/quickstart/prisma"
    icon={<svg
    xmlns="http://www.w3.org/2000/svg"
    width={36}
    height={36}
    viewBox="0 0 32 32"
  >
    <title>{"file_type_prisma"}</title>
    <path
      d="m25.21 24.21-12.471 3.718a.525.525 0 0 1-.667-.606l4.456-21.511a.43.43 0 0 1 .809-.094l8.249 17.661a.6.6 0 0 1-.376.832Zm2.139-.878L17.8 2.883A1.531 1.531 0 0 0 16.491 2a1.513 1.513 0 0 0-1.4.729L4.736 19.648a1.592 1.592 0 0 0 .018 1.7l5.064 7.909a1.628 1.628 0 0 0 1.83.678l14.7-4.383a1.6 1.6 0 0 0 1-2.218Z"
      style={{
        fill: "#d2d2d2",
        fillRule: "evenodd",
      }}
    />
  </svg>
}>
    Auth with Prisma
  </Card>
</CardGroup>
